<template>
  <div class="adivser-list-page">
    <ul class="adviser-list">
      <li
        class="adviser-item van-hairline--bottom tap-active"
        v-for="(item, i) in list"
        :key="item.tgInfo.id"
        :class="{ 'van-hairline--top' : i === 1}"
        @click="$router.push(`/adviser/detail/${item.tgInfo.id}/`)"
      >
        <van-image lazy-load
          :src="item.tgInfo.avatar"
          width="72px"
          height="72px"
          class="avatar"
        />
        <div class="adviser-info">
          <div>
            <h4 class="van-ellipsis">{{item.tgInfo.name}}</h4>
            <div class="follow">
              <i class="icon icon-follow"></i>
              <span>{{item.followCount}}</span>
            </div>
          </div>
          <p class="van-multi-ellipsis--l2">{{item.tgInfo.profile}}</p>
        </div>
      </li>
    </ul>
    <div class="text-center">
      <van-loading v-show="loading" type="spinner" size="16px">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Loading } from 'vant';
import { getTgInfoListForApp } from '../../api/adviser';

export default {

  components: {
    [Loading.name]: Loading
  },

  data() {
    return {
      list: [],
      loading: false,
      page: 1
    }
  },

  mounted() {
    this.$setTitle('投顾');
    this.getTgInfoListForApp();
    this.$bus.$on('reachBottom', this.reachBottom.bind(this));
    this.$bus.$on('onPullDownRefresh', () => {
      setTimeout(() => {
        this.page = 1;
        this.getTgInfoListForApp().then(() => {
          this.$bus.$emit('stopPullDownRefresh');
        });
      }, 500)
    });
  },

  beforeDestroy() {
    this.$bus.$off('reachBottom');
  },

  methods: {
    async getTgInfoListForApp() {
      try {
        this.loading = true;
        const data = await getTgInfoListForApp({
          offset: 0,
          size: 10
        })
        this.list = data.list;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    async reachBottom() {
      try {
        this.loading = true;
        ++this.page;
        const data = await getTgInfoListForApp({
          offset: (this.page - 1) * 10,
          size: 10,
        })
        this.list = this.list.concat(data.list);
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="less">
.adivser-list-page {
  .adviser-list {
    background: #fff;

    .adviser-item {
      display: flex;
      align-items: center;
      padding: 15px;

      h4 {
        display: inline-block;
        font-size: 18px;
        margin-bottom: 5px;
      }

      .adviser-info {
        width: 100%;

        p {
          color: #5e616b;
          font-size: 14px;
        }
      }

      .follow {
        color: #bfbfbf;
        font-size: 13px;
        float: right;

        * {
          vertical-align: middle;
        }
      }

      .avatar {
        height: 72px;
        min-width: 72px;
        background: #ccc;
        margin-right: 15px;
        display: inline-block;
        border-radius: 4px;

        img {
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
